/**
 * Created by 小敏哥 on 2017/11/24.
 * 带删除按钮，验证功能，记忆功能的输入框
 */
import React, {Component} from 'react';
import timeOutLocalStorage from '../../utils/timeOutLocalStorage'
import style from './index.scss'

class InputWithDelete extends Component {
    constructor(props) {
        super(props);
        this.state = {
            check: 'none',
            value: typeof(props.initValue) != 'undefined' && props.initValue ? props.initValue : '',
        }
    }

    static propTypes = {
        initValue: React.PropTypes.string,//初始值
        storageKey: React.PropTypes.string,//用于记忆最后输入值的key值，如需记忆则需传入，且需唯一
        title: React.PropTypes.string,//标题
        placeholder: React.PropTypes.string,//提示语
        onChange: React.PropTypes.func,//onChange事件
        onBlur: React.PropTypes.func,//onBlur事件
        onInput: React.PropTypes.func,//onInput事件
        onFocus: React.PropTypes.func,//onFocus时间
        errorCallBack: React.PropTypes.func,//错误时触发的回调
        currentCallBack: React.PropTypes.func,//正确时触发回调
        regular: React.PropTypes.string,//正则表达式
        type: React.PropTypes.string,//类型
        maxLength: React.PropTypes.number,//最大长度
        changeValue: React.PropTypes.func,//此处提供一个钩子，在输入之后显示之前能够改变当前的值并显示
        titleWidth: React.PropTypes.string,//此处提供可设置的标题长度，防止标题太长换行
        icon:React.PropTypes.string,//提示图标链接
        iconClick:React.PropTypes.func,//图标点击事件
    };

    componentWillUnmount() {
        // this.props.storageKey&&timeOutLocalStorage.setItem(this.props.storageKey, this.state.value,24*60*60*1000);
    }

    componentDidMount() {
        let sessionValue = timeOutLocalStorage.getItem(this.props.storageKey);
        if (this.props.storageKey && sessionValue) {
            this.setState({
                value: sessionValue
            }, () => {
                this.textChange(sessionValue);
            });

        }
    }

    //值改变是进行验证
    textChange(value) {
        //有正则时验证正则
        if (this.props.regular) {
            var exp = new RegExp(this.props.regular, "g");
            if (exp.test(value)) {
                this.props.currentCallBack && this.props.currentCallBack(value);
                //此处当值为空时不显示验证图标，但仍然会检验结果并返回给父组件
                let checkValue = value ? 'true' : 'none';
                this.setState({
                    check: checkValue
                })
            }
            else {
                this.props.errorCallBack && this.props.errorCallBack(value);
                //此处当值为空时不显示验证图标，但仍然会检验结果并返回给父组件
                let checkValue = value ? 'false' : 'none';
                this.setState({
                    check: checkValue
                });
            }
        }
        else {
            //无正则时不验证，直接返回正确通知
            this.props.currentCallBack && this.props.currentCallBack(value);
            this.setState({
                check: 'true'
            })
        }
    }

    //值更改时存入缓存
    changeAndLeave(value) {
        if (typeof(this.props.maxLength) == 'undefined' || value.length <= this.props.maxLength) {
            setTimeout(() => {
                //缓存信息到本地
                this.props.storageKey && timeOutLocalStorage.setItem(this.props.storageKey, value, 24 * 60 * 60 * 1000);
                this.props.onChange && this.props.onChange(value);
                this.textChange(value);
            }, 0);
        }
    }


    //清空

    clear() {
        if (this.state.check == 'edit' || this.state.check == 'false') {
            this.setState({
                value: '',
            }, () => {
                //防止state值尚未更新前，其他操作抢先调用changgeAndLeave，此处重新调用一次确保清除成功
                this.changeAndLeave(this.state.value);
            });
            this.refs.inputItem.focus();
            this.props.errorCallBack && this.props.errorCallBack('');
            this.props.onChange && this.props.onChange('');
        }
    }

    //跟踪输入值改变，并向父节点实时通知验证结果
    input(e) {
        if (typeof(this.props.maxLength) == 'undefined' || e.target.value.length <= this.props.maxLength) {
            let value = e.target.value;
            if (this.props.changeValue) {
                value = this.props.changeValue(value);
            }
            this.setState({
                value: value,
                check: 'edit',
            });
            this.props.onInput && this.props.onInput(value);
        }
    }

    //获取焦点时将状态设置为编辑状态
    inputFocus() {
        this.setState({
            check: 'edit',
        });
    }

    //获取删除按钮样式
    getDeleteImg() {
        switch (this.state.check) {
            case 'true':
                return style.true;
            //  return './images/select-true.png';
            case 'edit':
                return style.edit;
            //  return './images/delete.png';
            case 'false':
                return style.false;
            //return './images/err.png';
            default:
                return '';
        }
    }

    render() {
        let titleStyle = this.props.titleWidth ? {width: this.props.titleWidth} : {};
        return <div className={style.InputWidthDelete}>
            {this.props.title ?
                <div className={style.title} style={titleStyle}>
                    <span>{this.props.title}</span>
                    {this.props.icon?<img src={this.props.icon} onClick={()=>{this.props.iconClick()}}/>:''}
                </div> : ''}
            <input ref="inputItem" onFocus={(e) => {
                this.inputFocus();
                this.props.onFocus && this.props.onFocus(e)
            }} value={this.state.value} placeholder={this.props.placeholder} type={this.props.type}
                   onBlur={(e) => {
                       let value = e.target.value;
                       if (this.props.changeValue) {
                           value = this.props.changeValue(value);
                       }
                       this.changeAndLeave(value)
                   }} onInput={(e) => {
                this.input(e)
            }}/>
            <div className={style.buttonContainer}>
                {this.state.check != 'none' ? <button className={this.getDeleteImg()} onClick={() => {
                    this.clear()
                }}></button> : ''}</div>
        </div>
    }
}

export default InputWithDelete